<template>
  <div class="content">


    <div class="question">
      <label>
        <span>请输入答案个数：</span>
        <input type="text" class="myinput" placeholder="请输入问题内容" v-model="questionContent">
      </label>

      <label>
        <span>请输入答案个数：</span>
        <input type="text" class="myinput" placeholder="答案个数" v-model="answerNumber">
      </label>
    </div>

    <div class="answer" v-if="answerNumber !== ''">
      <div v-for="item in parseInt(answerNumber)" v-bind:key="item">

        <label class="answer-content">
          <input type="text" class="myanswer myinput" placeholder="请输入答案的具体内容">
        </label>
        <label class="answer-flag">
          <input type="checkbox" class="is-ture">
          <span>是否是正确答案</span>
        </label>
      </div>

      <button v-on:click="submitQuestion">确定发布</button>
    </div>


    <div class="test-answer">
      <h3>待回答的问题</h3>
      <div v-for="(item, index) in questionData" v-bind:key="index">
        <h4 v-text="item.question"></h4>
        <div v-for="(item1, index) in item.answer" v-bind:key="index">
          <span>{{item1.aContent}}</span>
          <input type="checkbox">
          <input v-bind:checked="item1.isTrue" type="checkbox">
          {{item1.isTrue}}
<!--            isTure 是 number 类型-->
          <div v-text="typeof item1.isTrue"></div>
        </div>
      </div>

      <button>确定</button>

    </div>



  </div>

</template>

<script>
  export default {
    name: 'Guess',
    data () {
      return {
        // part1：用户输入的信息
        /*  答案的个数 */
        answerNumber: '',
        /*  问题的主体内容 */
        questionContent: '',

        /*  答案内容
            answers 是一个对象数组
             answers:[
              {
                answerContent: "",
                isTrue: ""
              },
              {},
              {},
            ]

        * */
        answers: [],

        // part2：从数据库中获取的信息
        questionData: []
      }
    },
    created () {
      // 1. 页面创建时，从数据库中获取题库数据
      this.getQuestion()

    },
    methods: {
      // 从题库获取数据
      async getQuestion () {
        var result = await this.$http.get('http://116.62.157.224:8081/guess/select');
        console.log(result);
        this.questionData = result.data;

      },

      // 向数据库中添加问题
      async submitQuestion () {
        // 1. 遍历所有的答案输入框，将信息存入 this.answer 中
        // 1.1 遍历答案，获取答案内容
        var answerContents = []
        this.$('.myanswer').each(function (index, element) {
          answerContents.push(element.value)
        })

        // 1.2 遍历 CheckBox
        var isTrue = []
        this.$('.is-ture').each(function (index, element) {
          if (element.checked === true) {
            isTrue.push(1)
          } else {
            isTrue.push(0)
          }
        })

        // 2. 将答案内容和该答案是否正确这2个数组合并成为一个对象，他们之间是一一对应关系
        var i
        for (i = 0; i < this.answerNumber; i++) {
          var answerObj = {
            'answerContents': answerContents[i],
            'isTrue': isTrue[i]
          }
          this.answers.push(answerObj)
        }

        console.log(this.answers)

        // 3. 发起请求，存入数据库中

        const result = await this.$http.post('http://116.62.157.224:8081/guess/insert', {
          questionContent: this.questionContent,
          obj: this.answers
        })
        console.log(result)

        if (result.data.statusCode === 200) {
          alert('添加问题成功！')
          window.location.reload()

        }

      }
    }
  }
</script>

<style scoped>

  .myinput {
    width: 400px;
  }

  .content {
    margin-top: 30px;
  }

  .question {
    margin: 0 auto;
    width: 800px;
    text-align: center;
  }

  .answer {
    margin: 0 auto;
    width: 800px;
    text-align: center;
  }

  .test-answer {
    margin: 0 auto;
    width: 800px;
    text-align: center;
  }

  .answer-flag {
    margin-left: 20px;
  }

</style>
